<div class="profile-dn row">
	<div class="profile-wall small-12 small-centered medium-12 large-10 column" style="margin-top:3rem;">
		<div class="profile-left-wall small-12 medium-7 large-7 columns">
			<?php $this->view->partial('common/event_feeds'); ?>
		</div>
		
		<div class="profile-right-wall small-5 medium-5 large-5 columns">
			<div class="right-bx-contain large-12 column">
				<div class="right-head large-12 column">
					<p>Search Events</p>
				</div>
					<div class="right-content large-12 column">
						<div class="event-search row collapse">
							<div class="small-3 large-2 columns">
							<span class="prefix"><i class="fa  fa-globe fa-lg"></i></span>
							</div>
							<!--Autocomplete Search box-->
							<div class="small-9 large-10 columns">
								<input class="spt" id="txtVenue" type="text" placeholder="Enter your address" onclick="initialize(), cleartext();">
							</div>
							<!--Google Map-->
							<div id="map-canvas" class="map-canvas large-12 column" style="background:gray;height:320px;"></div>
							<!--Results output-->
							<div class="hide large-4 columns" style="opacity: 0;">
								<input id="latlng" type="text" onfocus="codeLatLng();" onchange="codeLatLng();" size=60 readonly><br>
							</div>
							<div class="hide large-4 columns" style="opacity:0;">
								<input id="city" type="text" size=60 readonly><br>
							</div>
							<div class="hide large-4 columns" style="opacity:0;">
								<input id="string" type="text" size=60 readonly><br>
							</div>
						</div>  
					</div>
			</div>

			<div class="right-bx-contain large-12 column" style="background:none;margin-top:-.5rem;border:none;">
				<?php $this->view->partial('common/footer'); ?>
			</div>
		</div>
	</div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script>

  var geocoder;
  var map;
  var autocomplete;
  var markers = [];

 function initialize() {
      document.getElementById("latlng").value="";
      document.getElementById("txtVenue").value="";
      document.getElementById("string").value="";
      document.getElementById("city").value="";
      // Create an array of styles.
      var styles = [
              {stylers: [{ hue: "#006652" },{ saturation: -20 }]},
              {featureType: "road", elementType: "geometry",stylers:[{ lightness: 30 },{ visibility: "simplified" }] },
              {featureType: "road",elementType: "labels"}
               ];
      var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
      var myLatlng = new google.maps.LatLng(14.586902, 120.98570599999994);
      var mapOptions = {zoom: 16,center: myLatlng,mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                       }};
      geocoder = new google.maps.Geocoder();
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');
      //Search Box location restriction       
      var input = document.getElementById('txtVenue');
      var options = {
        componentRestrictions: { country: 'ph' }
    };
    //Autocomplete function
      autocomplete = new google.maps.places.Autocomplete(input, options);
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        codeAddress(); 
    });
    }

function codeAddress(AddressToPoints) {
  var iconBase = 'behomebased-ph/Design/Final/Photos/Icon';
  var address = document.getElementById('txtVenue').value;
   geocoder.geocode( { 'address': address, 'componentRestrictions':{'country':'ph'}}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            icon: URL + 'img/icons/Marker.png',
            position: results[0].geometry.location,
            draggable:true,
        });

        markers.push(marker);

        var coordinates = marker.getPosition();
        coordinates1 = coordinates.toString();
        coordinates2 = coordinates1.substring(1, coordinates1.length-1);
        document.getElementById("latlng").value = coordinates2; 
        document.getElementById("latlng").focus();    
      
        google.maps.event.addListener(marker, 'dragend', function() {
        var coordinates = marker.getPosition();
        coordinates1 = coordinates.toString();
        coordinates2 = coordinates1.substring(1, coordinates1.length-1);
        document.getElementById("latlng").value = coordinates2;  
        document.getElementById("latlng").focus(); 
        map.setCenter(coordinates);   

        setTimeout(get, 230);

        function get(){
            document.getElementById('txtVenue').value = document.getElementById('string').value;
            }
          setTimeout(get, 230);
      });

      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }
  // Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
  }

function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

function codeLatLng(PointsToAddress) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    var latlng = new google.maps.LatLng(lat, lng);
    var string;
 
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {

          for (var j=0; j<results.length; j++)
          {

          for (var i=0; i<results[j].address_components.length; i++)
              {
                  if (results[j].address_components[i].types[0] == "locality") {
                          //this is the object you are looking for
                          city = results[j].address_components[i];
                      }
              }
            }

      string = (results[0].formatted_address);
      document.getElementById("string").value = string;
      document.getElementById("city").value =  city.long_name;

      var city_name = city.long_name;
      var length = city_name.length;

      if (city_name.substr(-4, 4) == "City")
          {
            document.getElementById("city").value = city_name.substr(0, length-5);
          }

          else if (city_name.substr(0,7) == "City of")
            {
            document.getElementById("city").value = city_name.substr(8,length);
            }
            
             else { 
             }

          } 
          else {
            alert('No results found');
          }
        
      } 
      else {
      }
    });
  }

function cleartext(){
    document.getElementById("txtVenue").value="";
    document.getElementById("latlng").value="";
    document.getElementById("string").value="";
    document.getElementById("city").value="";
    deleteMarkers();
  }
  
google.maps.event.addDomListener(window, 'load', initialize);

</script>